<script setup lang="ts">
  import { h } from 'vue';
  import SvgIcon from '@/components/svgIcon/index.vue';

  defineOptions({ name: 'usersetting' });

  const treeData = [
    {
      title: '四川通恒中科',
      key: '0-0',
      children: [
        {
          title: '总经办',
          key: '0-0-0',
          icon: () =>
            h(SvgIcon, {
              class: 'icon',
              name: 'bumen',
            }),
        },
        {
          title: '综合服务中心',
          key: '0-0-1',
          icon: () =>
            h(SvgIcon, {
              class: 'icon',
              name: 'bumen',
            }),
        },
        {
          title: '成都分公司',
          key: '0-0-2',
          children: [
            {
              title: '总经办',
              key: '0-0-2-0',
              icon: () =>
                h(SvgIcon, {
                  class: 'icon',
                  name: 'bumen',
                }),
            },
            {
              title: '研发实施中心',
              key: '0-0-2-1',
              icon: () =>
                h(SvgIcon, {
                  class: 'icon',
                  name: 'bumen',
                }),
            },
          ],
        },
      ],
    },
  ];

  const form = reactive({});

  const columns = [
    {
      title: '角色',
      dataIndex: 'name',
      fixed: 'left',
      width: 140,
    },
    {
      title: '文件权限',
      children: [
        {
          title: '批量上传',
          dataIndex: 'batchUpload',
          slotName: 'batchUpload',
          align: 'center',
        },
        {
          title: '重命名',
          dataIndex: 'rename',
          slotName: 'batchUpload',
          align: 'center',
        },
        {
          title: '修改',
          dataIndex: 'modify',
          slotName: 'batchUpload',
          align: 'center',
        },
        {
          title: '复制',
          dataIndex: 'copy',
          slotName: 'batchUpload',
          align: 'center',
        },
        {
          title: '移动',
          dataIndex: 'move',
          slotName: 'batchUpload',
          align: 'center',
        },
        {
          title: '删除',
          dataIndex: 'delete',
          slotName: 'batchUpload',
          align: 'center',
        },
        {
          title: '下载',
          dataIndex: 'download',
          slotName: 'batchUpload',
          align: 'center',
        },
        {
          title: '转发',
          dataIndex: 'forward',
          slotName: 'batchUpload',
          align: 'center',
        },
        {
          title: '关联',
          dataIndex: 'associate',
          slotName: 'batchUpload',
          align: 'center',
        },
        {
          title: '锁定',
          dataIndex: 'lock',
          slotName: 'batchUpload',
          align: 'center',
        },
        {
          title: '解锁',
          dataIndex: 'unlock',
          slotName: 'batchUpload',
          align: 'center',
        },
        {
          title: '评论',
          dataIndex: 'comment',
          slotName: 'batchUpload',
          align: 'center',
        },
        {
          title: '修订',
          dataIndex: 'revise',
          slotName: 'batchUpload',
          align: 'center',
        },
      ],
    },
    {
      title: '文件夹权限',
      children: [
        {
          title: ' 查询 ',
          dataIndex: 'query',
          slotName: 'batchUpload',
          align: 'center',
        },
        {
          title: ' 新增目录 ',
          dataIndex: 'createDirectory',
          slotName: 'batchUpload',
          align: 'center',
        },
        {
          title: ' 重新命名目录 ',
          dataIndex: 'renameDirectory',
          slotName: 'batchUpload',
          align: 'center',
        },
        {
          title: ' 文件夹移动 ',
          dataIndex: 'moveFolder',
          slotName: 'batchUpload',
          align: 'center',
        },
        {
          title: ' 删除目录 ',
          dataIndex: 'deleteDirectory',
          slotName: 'batchUpload',
          align: 'center',
        },
      ],
    },
  ];
  const data = reactive([
    {
      key: '1',
      name: 'OA 管理员',
    },
    {
      key: '2',
      name: '总账会计',
    },
    {
      key: '3',
      name: '总经理测试',
    },
  ]);
</script>

<template>
  <div key="asdasd" class="container">
    <!--    <a-card class="general-card" title="部门设置">-->
    <a-row gutter="10">
      <a-col span="4.5">
        <a-card title="部门操作">
          <a-tree default-expand-all blockNode :data="treeData" />
        </a-card>
      </a-col>
      <a-col span="18">
        <a-card title="用户权限" hoverable>
          <a-table
            :scroll="{ x: 2300 }"
            :columns="columns"
            :data="data"
            :width="600"
            :bordered="{ headerCell: true }"
          >
            <template #batchUpload>
              {{ record }}
              <a-checkbox value="1"></a-checkbox>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>
    <!--    </a-card>-->
  </div>
</template>

<style scoped lang="less">
  .container {
    height: 100%;
    width: 100%;
    background: #f2f3f5;
  }

  .formContent {
    width: 100%;
  }
  // tree的css样式
  :deep(.icon) {
    width: 1.2em !important;
    height: 1.2em !important;
  }

  :deep(.arco-tree-node-title-text) {
    font-size: 12px;
    width: 140px;
    overflow: hidden; /* 隐藏溢出内容 */
    white-space: nowrap; /* 禁止换行 */
    text-overflow: ellipsis; /* 显示省略号 */
  }

  :deep(.arco-tree-node-indent-block) {
    width: 0px !important;
  }

  :deep(.arco-tree-node-indent) {
  }
</style>
